<div ng-controller="LaunchInstanceSourceCtrl">
  <h1>{$ ::label.title $}</h1>

  <!--content-->
  <div class="content">
    <div class="subtitle">{$ ::label.subtitle $}</div>

    <!--selected-source form-->
    <div class="selected-source clearfix">
      <div class="row">
        <div class="col-xs-12 col-sm-8">
          <div class="row form-group">
            <div class="col-sm-12 col-md-5">
              <div class="form-field required instance-name"
                ng-class="{ 'has-warning': launchInstanceSourceForm['instance-name'].$invalid && launchInstanceSourceForm['instance-name'].$dirty }">
                <label class="on-top">{$ ::label.instanceName $}</label>
                <span class="fa fa-exclamation-triangle invalid"
                    ng-show="launchInstanceSourceForm['instance-name'].$invalid && launchInstanceSourceForm.$dirty"
                    popover="{$ instanceNameError $}"
                    popover-placement="top" popover-append-to-body="true"
                    popover-trigger="hover"></span>
                <input name="instance-name" type="text" class="form-control input-sm"
                       ng-model="model.newInstanceSpec.name" ng-required="true">
              </div>
            </div>

            <div class="col-sm-12 col-md-5">
              <div class="form-field availability-zone">
                <label class="on-top">{$ ::label.availabilityZone $}</label>
                <select class="form-control input-sm"
                        ng-options="zone for zone in model.availabilityZones"
                        ng-model="model.newInstanceSpec.availability_zone">
                </select>
              </div>
            </div>

            <div class="col-sm-6 col-md-2">
              <div class="form-field instance_count"
                ng-class="{ 'has-warning': launchInstanceSourceForm['instance-count'].$invalid }">
                <label class="on-top">{$ ::label.instance_count $}</label>
                <span class="fa fa-exclamation-triangle invalid"
                    ng-show="launchInstanceSourceForm['instance-count'].$invalid"
                    popover="{$ launchInstanceSourceForm['instance-count'].$error.validateNumberMax ? instanceCountMaxError : instanceCountError $}"
                    popover-placement="top" popover-append-to-body="true"
                    popover-trigger="hover"></span>
                <input name="instance-count" type="number" class="form-control input-sm"
                       ng-model="model.newInstanceSpec.instance_count"
                       ng-required="true" ng-pattern="/^[0-9]+$/"
                       validate-number-min="1"
                       validate-number-max="{$ maxInstanceCount $}">
              </div>
            </div>
          </div>

        </div>

        <!--instance chart-->
        <div class="col-xs-12 col-sm-4">
          <div class="chart">
            <pie-chart chart-data="instanceStats" chart-settings="donutSettings"></pie-chart>
          </div>
        </div>
        <!--end instance chart-->
      </div>
    </div>
    <!--end selected-source form-->

    <h2 class="section-title">{$ ::label.instanceSourceTitle $}</h2>
    <div class="subtitle">{$ ::label.instanceSourceSubTitle $}</div>

    <!--instance-source form-->
    <div class="instance-source clearfix">
      <div class="form-horizontal">
        <div class="row">
          <div class="col-xs-12 col-sm-3">
            <div class="form-field image"
              ng-class="{ 'has-warning': launchInstanceSourceForm['boot-source-type'].$invalid }">
              <label class="on-top">{$ ::label.bootSource $}</label>
              <span class="fa fa-exclamation-triangle invalid"
                    ng-show="launchInstanceSourceForm['boot-source-type'].$invalid"
                    popover="{$ bootSourceTypeError $}"
                    popover-placement="top" popover-append-to-body="true"
                    popover-trigger="hover"></span>
              <select name="boot-source-type" class="form-control input-sm"
                      ng-options="src.label for src in bootSourcesOptions track by src.type"
                      ng-change="updateBootSourceSelection(model.newInstanceSpec.source_type.type)"
                      ng-model="model.newInstanceSpec.source_type">
              </select>
            </div>
          </div>

          <!-- start image select options -->
          <div class="col-xs-12 col-sm-9"
               ng-if="model.newInstanceSpec.source_type.type === 'image'">

            <div class="col-xs-12 col-sm-3">
              <div class="form-group create-volume">
                <label class="on-top">{$ ::label.volumeCreate $}</label>
                <div class="form-field">
                  <div class="btn-group">
                    <label class="btn btn-toggle"
                      ng-repeat="option in toggleButtonOptions"
                      ng-model="model.newInstanceSpec.vol_create"
                      btn-radio="option.value">{$ ::option.label $}</label>
                  </div>
                </div>
              </div>
            </div>

            <settings-service required-settings='["OPENSTACK_HYPERVISOR_FEATURES.can_set_mount_point"]'
              ng-if="model.newInstanceSpec.vol_create === true">
              <div class="col-xs-12 col-sm-3">
                <div class="form-field">
                  <label>{$ ::label.volumeDeviceName $}</label>
                  <input class="form-control input-sm"
                         ng-model="model.newInstanceSpec.vol_device_name"
                         type="text">
                </div>
              </div>
            </settings-service>

            <div class="col-xs-12 col-sm-2 volume-size-wrapper" ng-if="model.newInstanceSpec.vol_create == true">
              <div class="form-field volume-size"
                ng-class="{ 'has-warning': launchInstanceSourceForm['volume-size'].$invalid }">
                <label class="on-top">{$ ::label.volumeSize $}</label>
                <span class="fa fa-exclamation-triangle invalid"
                    ng-show="launchInstanceSourceForm['volume-size'].$invalid"
                    popover="{$ launchInstanceSourceForm['volume-size'].$error.validateNumberMin ? minVolumeSizeError : volumeSizeError $}"
                    popover-placement="top" popover-append-to-body="true"
                    popover-trigger="hover"></span>
                <input name="volume-size" type="number"
                       class="form-control input-sm volume-size"
                       ng-model="model.newInstanceSpec.vol_size"
                       ng-pattern="/^[0-9]+$/" ng-required="true"
                       validate-number-min="{$ minVolumeSize $}">
              </div>
            </div>

            <div class="col-xs-12 col-sm-4" ng-if="model.newInstanceSpec.vol_create == true">
              <div class="form-group delete-volume">
                <label class="on-top">{$ ::label.deleteVolumeOnTerminate $}</label>
                <div class="form-field">
                  <div class="btn-group">
                    <label class="btn btn-toggle"
                      ng-repeat="option in toggleButtonOptions"
                      ng-model="model.newInstanceSpec.vol_delete_on_terminate"
                      btn-radio="option.value">{$ ::option.label $}</label>
                  </div>
                </div>
              </div>
            </div>
          </div><!-- end image select options -->

          <!-- start volume select options -->
          <div class="col-xs-12 col-sm-9"
               ng-if="model.newInstanceSpec.source_type.type == 'volume' || model.newInstanceSpec.source_type.type == 'volume_snapshot'">
            <div class="col-xs-12 col-sm-6">

              <div class="form-group delete-volume">
                <label class="on-top">{$ ::label.deleteVolumeOnTerminate $}</label>
                <div class="form-field">
                  <div class="btn-group">
                    <label class="btn btn-toggle"
                      ng-repeat="option in toggleButtonOptions"
                      ng-model="model.newInstanceSpec.vol_delete_on_terminate"
                      btn-radio="option.value">{$ ::option.label $}</label>
                  </div>
                </div>
              </div>

            </div>
          </div><!-- end volume select options -->

        </div>
      </div>
    </div>
    <!--end instance-source form-->

    <transfer-table help-text="helpText"
                    tr-model="tableData">
      <allocated validate-number-min="1" ng-model="tableData.allocated.length">
        <table class="table-striped table-rsp table-detail modern"
               hz-table
               st-safe-src="tableData.allocated"
               st-table="tableData.displayAllocated">

          <!-- transfer table, allocated table head -->
          <thead>
            <tr>
              <th class="expander"></th>
              <th ng-class="tableHeadCells[0].classList"
                  ng-style="tableHeadCells[0].style">
                {$ tableHeadCells[0].text $}
              </th>
              <th ng-class="tableHeadCells[1].classList"
                  ng-style="tableHeadCells[1].style">
                {$ tableHeadCells[1].text $}
              </th>
              <th ng-class="tableHeadCells[2].classList"
                  ng-style="tableHeadCells[2].style">
                {$ tableHeadCells[2].text $}
              </th>
              <th ng-class="tableHeadCells[3].classList"
                  ng-style="tableHeadCells[3].style">
                {$ tableHeadCells[3].text $}
              </th>
              <th ng-class="tableHeadCells[4].classList"
                  ng-style="tableHeadCells[4].style">
                {$ tableHeadCells[4].text $}
              </th>
              <th class="action"></th>
            </tr>
          </thead><!-- /transfer table, allocated table head -->

          <!-- transfer table, allocated table body -->
          <tbody>

            <tr ng-if="tableData.allocated.length === 0">
              <td colspan="{$ tableHeadCells.length + 2 $}">
                <div class="no-rows-help">
                  {$ ::trCtrl.helpText.noneAllocText $}
                </div>
              </td>
            </tr>

            <tr ng-repeat-start="row in selection">
              <td class="expander">
                <span class="fa fa-chevron-right"
                      hz-expand-detail
                      title="{$ ::trCtrl.helpText.expandDetailsText $}"></span>
              </td>
              <td ng-class="tableBodyCells[0].classList"
                  ng-style="tableBodyCells[0].style">
                {$ tableBodyCells[0].filter ? tableBodyCells[0].filter(row[tableBodyCells[0].key], tableBodyCells[0].filterArg) : row[tableBodyCells[0].key] $}
              </td>
              <td ng-class="tableBodyCells[1].classList"
                  ng-style="tableBodyCells[1].style">
                {$ tableBodyCells[1].filter ? tableBodyCells[1].filter(row[tableBodyCells[1].key], tableBodyCells[1].filterArg) : row[tableBodyCells[1].key] $}
              </td>
              <td ng-class="tableBodyCells[2].classList"
                  ng-style="tableBodyCells[2].style">
                {$ tableBodyCells[2].filter ? tableBodyCells[2].filter(row[tableBodyCells[2].key], tableBodyCells[2].filterArg) : row[tableBodyCells[2].key] $}
              </td>
              <td ng-class="tableBodyCells[3].classList"
                  ng-style="tableBodyCells[3].style">
                {$ tableBodyCells[3].filter ? tableBodyCells[3].filter(row[tableBodyCells[3].key], tableBodyCells[3].filterArg) : row[tableBodyCells[3].key] $}
              </td>
              <td ng-class="tableBodyCells[4].classList"
                  ng-style="tableBodyCells[4].style">
                <span ng-if="model.newInstanceSpec.source_type.type === 'volume' && row.availability_zone !== model.newInstanceSpec.availability_zone"
                      class="invalid fa fa-exclamation-triangle"
                      popover="{$ ::trCtrl.helpText.volumeAZHelpText $}"
                      popover-trigger="mouseenter mouseleave"
                      popover-append-to-body="true"
                      popover-placement="top"></span>
                {$ tableBodyCells[4].filter ? tableBodyCells[4].filter(row[tableBodyCells[4].key], tableBodyCells[4].filterArg) : row[tableBodyCells[4].key] $}
              </td>
              <td class="action-col">
                <action-list>
                  <action action-classes="'btn btn-sm btn-default'"
                          callback="trCtrl.deallocate"
                          item="row">
                    <span class="fa fa-minus"></span>
                  </action>
                </action-list>
              </td>
            </tr>
            <tr class="detail-row"
                ng-repeat-end
                ng-include="sourceDetails">
            </tr>
          </tbody><!-- /transfer table, allocated table body -->
        </table>
      </allocated>

      <available>
        <table st-table="tableData.displayedAvailable"
               st-safe-src="tableData.available"
               hz-table
               class="table-striped table-rsp table-detail modern">

          <!-- transfer table, available table head -->
          <thead>
          <tr>
            <th class="search-header"
                colspan="{$ tableHeadCells.length + 2 $}">
              <search-bar group-classes="input-group-sm"
                          icon-classes="fa-search">
              </search-bar>
              </th>
            </tr>
            <tr>
              <th class="expander"></th>
              <th ng-attr-st-sort-default="{$ tableHeadCells[0].sortDefault $}"
                  ng-class="tableHeadCells[0].classList"
                  ng-style="tableHeadCells[0].style"
                  st-sort="{$ tableHeadCells[0].sortable && tableBodyCells[0].key $}">
                {$ tableHeadCells[0].text $}
              </th>
              <th ng-attr-st-sort-default="{$ tableHeadCells[1].sortDefault $}"
                  ng-class="tableHeadCells[1].classList"
                  ng-style="tableHeadCells[1].style"
                  st-sort="{$ tableHeadCells[1].sortable && tableBodyCells[1].key $}">
                {$ tableHeadCells[1].text $}
              </th>
              <th ng-attr-st-sort-default="{$ tableHeadCells[2].sortDefault $}"
                  ng-class="tableHeadCells[2].classList"
                  ng-style="tableHeadCells[2].style"
                  st-sort="{$ tableHeadCells[2].sortable && tableBodyCells[2].key $}">
                {$ tableHeadCells[2].text $}
              </th>
              <th ng-attr-st-sort-default="{$ tableHeadCells[3].sortDefault $}"
                  ng-class="tableHeadCells[3].classList"
                  ng-style="tableHeadCells[3].style"
                  st-sort="{$ tableHeadCells[3].sortable && tableBodyCells[3].key $}">
                {$ tableHeadCells[3].text $}
              </th>
              <th ng-attr-st-sort-default="{$ tableHeadCells[4].sortDefault $}"
                  ng-class="tableHeadCells[4].classList"
                  ng-style="tableHeadCells[4].style"
                  st-sort="{$ tableHeadCells[4].sortable && tableBodyCells[4].key $}">
                {$ tableHeadCells[4].text $}
              </th>
              <th class="action"></th>
            </tr>
          </thead><!-- /transfer table, available table head -->

          <tbody>

            <tr ng-if="trCtrl.numDisplayedAvailable() === 0">
              <td colspan="{$ tableHeadCells.length + 2 $}">
                <div class="no-rows-help">
                  {$ ::trCtrl.helpText.noneAvailText $}
                </div>
              </td>
            </tr>

            <tr ng-repeat-start="row in tableData.displayedAvailable track by row.id"
                ng-if="!trCtrl.allocatedIds[row.id]">
              <td class="expander">
                <span class="fa fa-chevron-right"
                      hz-expand-detail
                      title="{$ ::trCtrl.helpText.expandDetailsText $}">
                </span>
              </td>
              <td ng-class="tableBodyCells[0].classList"
                  ng-style="tableBodyCells[0].style">
                {$ tableBodyCells[0].filter ? tableBodyCells[0].filter(row[tableBodyCells[0].key], tableBodyCells[0].filterArg) : row[tableBodyCells[0].key] $}
              </td>
              <td ng-class="tableBodyCells[1].classList"
                  ng-style="tableBodyCells[1].style">
                {$ tableBodyCells[1].filter ? tableBodyCells[1].filter(row[tableBodyCells[1].key], tableBodyCells[1].filterArg) : row[tableBodyCells[1].key] $}
              </td>
              <td ng-class="tableBodyCells[2].classList"
                  ng-style="tableBodyCells[2].style">
                {$ tableBodyCells[2].filter ? tableBodyCells[2].filter(row[tableBodyCells[2].key], tableBodyCells[2].filterArg) : row[tableBodyCells[2].key] $}
              </td>
              <td ng-class="tableBodyCells[3].classList"
                  ng-style="tableBodyCells[3].style">
                {$ tableBodyCells[3].filter ? tableBodyCells[3].filter(row[tableBodyCells[3].key], tableBodyCells[3].filterArg) : row[tableBodyCells[3].key] $}
              </td>
              <td ng-class="tableBodyCells[4].classList"
                  ng-style="tableBodyCells[4].style">
                <span ng-if="model.newInstanceSpec.source_type.type === 'volume' && row.availability_zone !== model.newInstanceSpec.availability_zone"
                      class="invalid fa fa-exclamation-triangle"
                      popover="{$ ::trCtrl.helpText.volumeAZHelpText $}"
                      popover-trigger="mouseenter mouseleave"
                      popover-append-to-body="true"
                      popover-placement="top"></span>
                {$ tableBodyCells[4].filter ? tableBodyCells[4].filter(row[tableBodyCells[4].key], tableBodyCells[4].filterArg) : row[tableBodyCells[4].key] $}
              </td>
              <td class="action-col">
                <action-list>
                  <action action-classes="'btn btn-sm btn-default'"
                          callback="trCtrl.allocate"
                          item="row">
                    <span class="fa fa-plus"></span>
                  </action>
                </action-list>
              </td>
            </tr>
            <tr class="detail-row"
                ng-repeat-end
                ng-include="sourceDetails">
            </tr>
          </tbody>
        </table>
      </available>
    </transfer-table>

  </div>
  <!-- end content -->
</div>
